<template>
  <div class="app-container">
    <!-- 列表 -->
    <el-table ref="tableRef" v-loading="loading" :data="datas" style="width: 100%" border>
      <el-table-column prop="numbers" label="序号" min-width="80" align="center"/>
      <el-table-column prop="name" label="备份文件名称" min-width="200" align="center" show-overflow-tooltip/>
      <el-table-column prop="part" label="卷数" min-width="100" align="center"/>
      <el-table-column prop="compress" label="压缩" min-width="100" align="center"/>
      <el-table-column prop="size" label="数据大小" min-width="100" align="center"/>
      <el-table-column prop="mtime" label="备份时间" min-width="160" align="center"/>
      <!--<el-table-column prop="status" label="状态" min-width="120" align="center"/>-->
      <el-table-column label="操作" min-width="220" align="center">
        <template slot-scope="{ row }">
          <el-button type="warning" icon="el-icon-download" size="mini" @click="download(row)">下载</el-button>
          <el-button type="primary" :class="'btn--'+row.name" size="mini" v-html="defaultImportBtnText" @click="doImport(row)"></el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import screenHeight from '@/utils/screen-height'
import {downloadFile} from '@/utils/index'
import {importList, doImport, del} from '@/api/admin/database'

export default {
  name: 'AdminDatabaseImport',
  components: {},
  data() {
    return {
      height: 680,
      loading: false,
      datas: [],
      query: {},
      model: {
        numbers: '',
        name: '',
        part: '',
        compress: '',
        size: '',
        mtime: '',
        status: ''
      },

      defaultImportBtnText: '<i class="el-icon-back"/>还原'
    }
  },
  created() {
    this.height = screenHeight()
    this.list()
  },
  methods: {
    // 列表
    list() {
      this.loading = true
      importList(this.query).then(res => {
        this.datas = res.data.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    // 还原
    doImport(row) {
      this.$confirm(
        '确定要还原： <span style="color:red">' + row.name + ' </span> 这条备份数据吗？',
        '序号：' + row.numbers,
        {type: 'warning', dangerouslyUseHTMLString: true}
      ).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '正在还原数据库，请稍候...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        doImport({
          time: row.time,
          filepath: row.filepath
        }).then(res => {
          this.restore(res.data, row, loading)
        }).catch(() => {
          loading.close()
        })
        window.onbeforeunload = function () {
          return "正在还原数据库，请不要关闭！"
        }
      }).catch(() => {
      })
    },
    // 删除
    del(row) {
      this.$confirm(
        '确定要删除： <span style="color:red">' + row.name + ' </span> 这条备份数据吗？',
        '序号：' + row.numbers,
        {type: 'warning', dangerouslyUseHTMLString: true}
      ).then(() => {
        this.loading = true
        del({
          time: row.time,
          filepath: row.filepath
        }).then(res => {
          this.loading = false
          if (res.code == 200) {
            this.list()
            this.reset()
            this.$message.success(res.msg)
          } else {
            this.$message.info(res.msg)
          }
        }).catch(() => {
          this.loading = false
        })
      }).catch(() => {
      })
    },
    // 下载
    download(row) {
      downloadFile(row.full_filepath)
    },
    // 重置
    reset(row) {
      if (row) {
        this.model = row
      } else {
        this.model = this.$options.data().model
      }
    },

    // 恢复
    restore(data, row, loading) {
      if (data.status == -1) {
        // 初始化
        doImport({
          part: data.part,
          start: data.start,
          time: data.time
        }).then(res2 => {
          this.restore(res2.data, row, loading)
        }).catch(() => {
          loading.close()
        })
      } else {
        // 开始恢复
        if (data.status == 1) {
          setTimeout(() => {
            loading.close()
            document.getElementsByClassName('btn--' + row.name)[0].innerHTML = data.info
          }, 2000)
          if (data.part) {
            doImport({
              part: data.part,
              start: data.start
            }).then(res2 => {
              this.restore(res2.data, row, loading)
            }).catch(() => {
              loading.close()
            })
          } else {
            window.onbeforeunload = function () {
              return null
            }
          }
        }
      }
    }
  }
}
</script>
